<template>
  <text
    class="iconfont"
    :class="icon"
    :style="{ 'font-size': size + 'rpx', color }"
    @click="onClick"
  ></text>
</template>

<script>
/**
 * iconfont 图标
 * @description 用于展示 iconfont 图标
 * @property {Number} size 图标大小 单位rpx
 * @property {String} type 图标图案，参考示例
 * @property {String} color 图标颜色
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
  name: 'Iconfont',
  props: {
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: '#666'
    }
  },
  data() {
    return {}
  },
  methods: {
    onClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("./iconfont.css");
.iconfont{
  vertical-align: middle;
}
</style>
